

<script>
    export default {
        name: "Tab",
      render() {
          const classStyle = {
            tab:true,
            active:this.bijiao
          };
        return <li onClick={this.clickIndex} class={ classStyle }>{this.label}</li>
      },
      props:{
          label:{
            type:String,
            default:'tab'
          },
        index:{
            type: [String,Number],
          default: '1'
        }
      },
      computed:{
          bijiao(){
            // console.log(this.$parent.currentIndex,this.index);
          return this.$parent.currentIndex==this.index
        }
      },
      methods:{
        clickIndex(){
          this.$parent.clickMeindex(this.index);
        }
      },
      mounted(){
        this.$parent.dataArr.push(this);

        // console.log(this.$parent.dataArr)
      }

    }
</script>

<style scoped>
  .tab {
    flex: 1;
    list-style: none;
    line-height: 40px;
    margin-right: 30px;
    position: relative;
    text-align: center;
  }

  .tab.active {
    border-bottom: 2px solid blue;
  }

</style>
